<template>
	<scroll-view scroll-y="true" class="com">
		<view class="box">
			<view class="li">
				<text>楼盘</text>
				<picker  :value="index" :range="arr"  @change="bindPickerChange">
					<view>{{arr[index]}}</view>
				</picker>
			</view>
			<view class="li">
				<text>标题</text>
				<input type="text" value="" placeholder="请输入"/>
			</view>
			<view class="li">
				<text>楼层</text>
				<input type="text" value="" placeholder="请输入"/>
			</view>
			<view class="li">
				<text>面积</text>
				<input type="text" value="" placeholder="请输入"/>
			</view>
			<view class="li">
				<text>户型</text>
				<input type="text" value="" placeholder="请输入"/>
			</view>
			<view class="li">
				<text>朝向</text>
				<input type="text" value="" placeholder="请输入"/>
			</view>
			<view class="li">
				<text>房价</text>
				<input type="text" value="" placeholder="请输入"/>
			</view>
			<view class="li">
				<text>产权年限</text>
				<input type="text" value="" placeholder="请输入"/>
			</view>
			<view class="li">
				<text>建筑类型</text>
				<input type="text" value="" placeholder="请输入"/>
			</view>
			<view class="li">
				<text>全 景 图</text>
				<input type="text" value="" placeholder="请输入链接"/>
			</view>
			<view class="lis">
				<text>房源标签(选填)</text>
				<view class="adds" v-for="l in tab">
					{{l}}
				</view>
				<view class="add" @click="mons">
					添加标签
				</view>
			</view>
			<view class="lis">
				<text>置业寄语</text>
			</view>
		</view>
		<yomol-prompt title="添加标签" :maxlength="500" defaultValue="" ref="yomolPrompt" @onConfirm="onPromptConfirm"></yomol-prompt>
	</scroll-view>
</template>

<script>
	import yomolPrompt from '@/components/yomol-prompt/yomol-prompt.vue'
	export default {
		components: {
			yomolPrompt
		},
		data() {
		  return {
			  index:0,
			  arr:['第一','第二'],
			  tab:[]
		  }
		  },
		methods: {
			 bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.index = e.target.value
			        },
					mons(){
							this.$refs.yomolPrompt.show()
						
					},
					onPromptConfirm(e) {
						this.tab.push(e)
					},
		},
		onLoad() {
		
		}
	}
</script>

<style scoped lang="less">
	.com{
		.box{
			width: 702rpx;
			margin: auto;
			.li{
				height: 97rpx;
				line-height: 97rpx;
				border-bottom: 1rpx solid #EEEEEE;
				picker{
					display: inline-block;
					vertical-align: middle;
					height: 97rpx;
					width:calc(100% - 162rpx);
				}
				input{
					display: inline-block;
					vertical-align: middle;
					height: 97rpx;
					width:calc(100% - 162rpx);
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(34,34,34,1);
				}
				text{
					display: inline-block;
					width: 162rpx;
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(34,34,34,1);
				}
			}
			.lis{
				padding-top: 35rpx;
				padding-bottom: 35rpx;
				.add{
					height:64rpx;
					background:rgba(255,255,255,1);
					border:1px solid rgba(204,204,204,1);
					border-radius:16rpx;
					display: inline-block;
					vertical-align: middle;
					margin-right: 7rpx;
					margin-left: 7rpx;
					padding-left: 40rpx;
					padding-right: 40rpx;
					line-height: 64rpx;
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(153,153,153,1);
					margin-top: 23rpx;
				}
				.adds{
					height:64rpx;
					background:rgba(255,255,255,1);
					border:1px solid rgba(204,204,204,1);
					border-radius:16rpx;
					display: inline-block;
					vertical-align: middle;
					margin-right: 7rpx;
					margin-left: 7rpx;
					padding-left: 40rpx;
					padding-right: 40rpx;
					line-height: 64rpx;
					font-size:24rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(153,153,153,1);
					margin-top: 23rpx;
				}
				text{
					display: block;
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(34,34,34,1);
				}
			}
		}
	}
</style>
